<template>
	<view class="entrepreneurship-release-page page">
		<view v-if="status==2" class="remark">审核未通过:{{remark}}；请修改</view>
		<view class="white-block">
			<view class="block-title FZHZGBJ">发布信息</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>标题</view>
				<input v-model="form.title" class="form-ctrl" placeholder-class="input-placeholder" placeholder="请输入标题" maxlength="20" />
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>乡镇</view>
				<NormalPicker v-if="township.length>0" style="display: block;height: 80rpx;" fs="28" :range="township" v-model="form.township" name="townshipName" class="form-ctrl"></NormalPicker>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>标签</view>
				<input v-model="form.label" @click="navigate('/page_pack/common/custom_label?label='+form.label)" :disabled="true" class="form-ctrl" placeholder-class="input-placeholder" placeholder="点击进行自定义标签" />
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>类型</view>
				<NormalPicker style="height: 80rpx;width: 100%;display: block;" fs="28" :range="type" v-model="form.type" class="form-ctrl"></NormalPicker>
			</view>
			<view @click="chooseLocation" class="form-item">
				<view class="form-label"><text class="require">*</text>所在位置</view>
				<input v-model="form.address" :disabled="true" class="form-ctrl" placeholder-class="input-placeholder" placeholder="点击选择位置" />
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>简介</view>
				<textarea v-model="form.introduction" maxlength="200" class="form-ctrl full" placeholder-class="input-placeholder" placeholder="请简单描述内容" ></textarea>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>上传图片（{{form.swiperImage.length}}/5）</view>
				<view class="tips">请上传顶部轮播图，第一张图片将作为封面图</view>
				<view class="upload-pic-ctrl">
					<view @click="viewImage('swiperImage',item)" class="upload-item" v-for="(item,index) in form.swiperImage" :key="index">
						<view @click.stop="deleteImage('swiperImage',index)" class="iconfont icon-shanchu"></view>
						<image mode="aspectFill" :src="item"></image>
					</view>
					<view class="upload-item">
						<image @click="chooseImage('swiperImage',5)" :src="cloudStorage+'index/upload.png'" v-if="form.swiperImage.length<5"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-block">
			<view v-if="form.id" @click="deleteInfo" class="btn cancel">删除</view>
			<view @click="submit" class="btn normal">保存</view>
		</view>
	</view>
</template>

<script>
	import NormalPicker from '@/page_pack/components/Picker/NormalPicker'
	import {getTypeList,saveEntrepreneurship,entrepreneurshipDetail,deleteEntrepreneurship} from '@/api/entrepreneurship'
	import {validate} from '@/util/validate'
	import {townshipList} from '@/api/index'
	export default{
		components:{
			NormalPicker
		},
		data(){
			return{
				status:null,
				remark:'',
				township:[],
				form:{
					id:0,
					title:'',
					township:null,
					label:'',
					type:null,
					address:'',
					latitude:'',
					longitude:'',
					introduction:'',
					swiperImage:[],
				},
				type:[],
				rule:{
					title:{
						name:'标题',
						required:true
					},
					township:{
						name:'乡镇',
						required:true,
					},
					label:{
						name:'标签',
						required:true
					},
					type:{
						name:'类型',
						required:true
					},
					address:{
						name:'所在位置',
						required:true
					},
					introduction:{
						name:'介绍',
						required:true
					},
					swiperImage:{
						name:'图片',
						required:true
					}
				}
			}
		},
		methods:{
			deleteInfo(){
				uni.showModal({
					title:'提示',
					content:'确定删除该条信息吗',
					success:(e)=>{
						if(e.confirm){
							uni.showLoading({
								title:'删除中',
								mask:true
							})
							deleteEntrepreneurship({id:this.form.id}).then(res=>{
								this.showToast('删除成功',()=>{
									uni.$emit('refreshMine')
									uni.navigateBack()
								})
							})
						}
					}
				})
			},
			submit(){
				if(validate(this.form,this.rule)){
					let form=JSON.parse(JSON.stringify(this.form));
					form.swiperImage=form.swiperImage.join(',');
					uni.showLoading({
						title:'提交中',
						mask:true
					})
					saveEntrepreneurship(form).then(res=>{
						this.showToast('保存成功',()=>{
							uni.$emit('refreshMine')
							uni.navigateBack()
						})
					})
				}
			},
			chooseLocation(){
				uni.chooseLocation({
					latitude:this.$store.getters.latitude,
					longitude:this.$store.getters.longitude,
					success:(e)=>{
						this.form.address=e.address;
						this.form.latitude=e.latitude;
						this.form.longitude=e.longitude;
					}
				})
			},
			async getConf(){
				uni.showLoading({
					title:'加载中',
					mask:true,
				})
				let res=await getTypeList()
				this.type=res.map(item=>{
					return {id:item.id,name:item.name}
				})
			},
			getDetail(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				entrepreneurshipDetail({id:this.form.id}).then(res=>{
					this.status=res.status;
					this.remark=res.remark;
					Object.keys(this.form).forEach(item=>{
						this.form[item]=item=='swiperImage'?res[item].split(','):res[item];
					})
				})
			},
			async getTownList(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				this.township=await townshipList();
			}
		},
		onUnload() {
			uni.$off('confirmLabel');
		},
		async onLoad(opt) {
			await this.getTownList();
			await this.getConf()
			if(opt.id){
				this.form.id=opt.id;
				this.getDetail()
			}
			uni.$on('confirmLabel',(val)=>{
				this.form.label=val;
			})
		}
	}
</script>

<style lang="scss" scoped>
	.entrepreneurship-release-page{
		padding: 30rpx;
		.white-block{
			background: #fff;
			border-radius: 8px;
			padding: 30rpx;
			.block-title{
				color: $theme-color;
			}
			.form-item:last-child{
				border-bottom:none;
			}
			.form-item{
				width: 100%;
				border-bottom: 1px solid #efefef;
				padding-top: 30rpx;
				.form-label{
					font-size: 28rpx;
					color: #1A1A1A;
					.require{
						color: red;
					}
				}
				.tips{
					font-size: 28rpx;
					color: #999;
				}
				.form-ctrl{
					font-size: 28rpx;
					min-height: 80rpx;
				}
				.form-ctrl.full{
					margin-top: 20rpx;
					display: block;
					height: 200rpx;
				}
				.upload-pic-ctrl{
					margin-top: 20rpx;
					display: flex;
					flex-wrap: wrap;
					.upload-item{
						margin-bottom: 30rpx;
						width: calc((100% - 60rpx)/3);
						height:190rpx;
						margin-right: 30rpx;
						border-radius: 8px;
						position: relative;
						.iconfont{
							position: absolute;
							right: 5px;
							top: 5px;
							color: #fff;
							font-size: 40rpx;
							text-shadow: 0 0 1px #000;
						}
						image{
							border-radius: 8px;
							width: 100%;
							height: 100%;
						}
					}
					.upload-item:nth-child(3n){
						margin-right: 0;
					}
				}
			}
		}
		.btn-block{
			display: flex;
			align-items: center;
			.btn{
				margin: 30rpx auto;
			}
		}
		.remark{
			background: #fff;
			border-radius: 8px;
			padding: 30rpx;
			margin-bottom: 30rpx;
			font-size: 28rpx;
		}
	}
</style>